<template>
  <div @click="toggleClick" class="hamburger">
    <i :class="icon" style="font-size:20px"></i>
  </div>
</template>

<script>
export default {
  name: "Hamburger",
  props: {
    isActive: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: "el-icon-s-unfold"
    }
  },
  methods: {
    toggleClick () {
      this.$emit("toggleClick");
    }
  }
};
</script>

<style scoped>
.hamburger {
  display: inline-block;
  /* vertical-align: middle; */
  width: 20px;
  height: 20px;
  cursor: pointer;
  /* display:flex;
  align-items: center;
  justify-content: center; */
}

.hamburger.is-active {
  transform: rotate(180deg);
}
</style>
